<template>
  <div class="record-wrapper">
    <div class="grid">
      <div class="header">余额明细</div>
      <div class="inner">
        <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
          <el-form-item label="">
            <el-select v-model="queryInfo.query" @change="fetch" placeholder="所有" style="width:100px">
              <el-option label="所有" value=""></el-option>
              <el-option label="消费" value="0"></el-option>
              <el-option label="充值" value="1"></el-option>
              <el-option label="退款" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <!-- 记录列表 -->
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column prop="id" label="记录ID" min-width="200"></el-table-column>
          <el-table-column prop="title" label="类型"></el-table-column>
          <el-table-column prop="before" label="变动前"></el-table-column>
          <el-table-column prop="amount" label="金额"></el-table-column>
          <el-table-column prop="after" label="剩余"></el-table-column>
          <!-- <el-table-column prop="detail" label="详细" min-width="200"></el-table-column> -->
          <el-table-column prop="createtime" label="时间" min-width="100px"></el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <Pagination :obj="obj" @pagination="fetch($event)" />
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      tableData: [],
      obj: {
        total: 0,
      },
    };
  },
  created() {
    this.fetch();
  },
  methods: {
    async fetch(page) {
      if (page && page.newPage) this.queryInfo.pagenum = page.newPage;
      if (page && page.newSize) this.queryInfo.pagesize = page.newSize;

      const formData = new FormData();
      formData.append("status", this.queryInfo.query);
      formData.append("page", this.queryInfo.pagenum);
      formData.append("rows", this.queryInfo.pagesize);
      const { data: res } = await this.$http.post("balanceList", formData);
      // console.log(res, "余额明细");
      if (res.code != "0") return this.$message("获取余额明细失败");
      res.data.result.forEach((item) => {
        if (Number(item.after) > Number(item.before)) {
          item.amount = "+ " + item.amount;
        } else {
          item.amount = "- " + item.amount;
        }
      });
      this.tableData = res.data.result;
      this.obj.total = res.data.totalCount;
    },
  },
};
</script>

<style lang="scss">
.record-wrapper {
  padding-bottom: 200px;
  .grid {
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
    margin-bottom: 30px;
    .header {
      padding: 15px;
      color: #fff;
      background-image: linear-gradient(to right, #ae7000, #fed18d);
    }
    .inner {
      padding: 20px;
    }
  }
}
.el-tabs__active-bar {
  width: 72px !important;
}
</style>
